{% extends "smartwebnote/app_base.html" %}

{% block extra_include %}
<!-- BEGIN: YUI library -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/paginator/assets/skins/sam/paginator.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/paginator/paginator-min.js"></script>


<!-- END: YUI library -->
{% endblock %}

{% block title %}Notes{% endblock %}

{% block content %}
<p> <a href ="/create">Create a new note</a> |
<a href ="/signout">Sign out</a>
</p>

<div id="myMarkedUpContainer">
    <table id="myTable">
        <thead>
            <tr>
                <th>Delete</th>
                <th>Note</th>
                <th>Last Updated</th>
                <th>Created</th>
            </tr>
        </thead>
    <tbody>
    {% for note in object_list %}
    <tr  valign="top">
    <td>
        <a href="/delete/{{ note.key }}">Delete</a>
    </td>
    <td>
        <a href="/edit/{{ note.key }}">{{ note.title }}</a>
    </td>
    <td>
        {{ note.last_updated|timesince }}
    </td>
    <td>
        {{ note.created|timesince }}
    </td>
    </tr>

    {% endfor %}
    </tbody>
    </table>
</div>

<script type="text/javascript">
	var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("myTable"));
	myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
	myDataSource.responseSchema = {
		fields: [{key:"Delete"},
				{key:"Note"},
				{key:"Last Updated"},
				{key:"Created"}
		]
	};

	var myColumnDefs = [
		{key:"Delete" , label:"", resizeable:true},
		{key:"Note", resizeable:true},
		{key:"Last Updated", sortable:true, resizeable:true},
		{key:"Created", sortable:true, resizeable:true}
	];

        var oConfigs = {
				paginator: new YAHOO.widget.Paginator({
					rowsPerPage: 50,
					template: YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE,
					rowsPerPageOptions: [10,25,50,100],
					pageLinks: 5

				}),
				initialRequest: "results=504"
		};

	var myDataTable = new YAHOO.widget.DataTable("myMarkedUpContainer", myColumnDefs, myDataSource, oConfigs,
		{caption: ""});
</script>

{% endblock %}